<!--
 * @Author: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @Date: 2022-12-01 15:57:11
 * @LastEditors: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @LastEditTime: 2022-12-05 09:45:16
 * @FilePath: \vue-openlayers\src\views\function\function3.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="container">
    <h3 class="h3">鼠标经纬度坐标控件</h3>
    <div
      id="vue-openlayers"
      class="map-x"
    >
      <div id="mouse" />
    </div>
  </div>
</template>
<script>
import 'ol/ol.css'
import {
  Map,
  View
} from 'ol'
import Tile from 'ol/layer/Tile'
// import OSM from 'ol/source/OSM'
// import * as control from 'ol/control'
import { XYZ } from 'ol/source'
import MousePosition from 'ol/control/MousePosition.js'
import { format } from 'ol/coordinate'

export default {
  name: 'FirstMap',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const mousePositionControl = new MousePosition({
        coordinateFormat: (coordinate) => {
          return format(coordinate, '经度:{x} 纬度:{y}', 3)
        },
        projection: 'EPSG:4326',
        target: 'mouse'
      })
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [
          new Tile({
            source: new XYZ({
              url: 'http://{a-c}.tile.openstreetmap.de/{z}/{x}/{y}.png',
              wrapX: true
            })
          })
        ],
        view: new View({
          projection: 'EPSG:4326',
          center: [114.064839, 22.548857],
          zoom: 8
        }),
        controls: [mousePositionControl]
      })
    }
  }
}
</script>

<style scoped>
.container {
  width: 1240px;
  height: 690px;
  margin: 50px auto;
  border: 1px solid #42b983;
}
#vue-openlayers {
  width: 1200px;
  height: 600px;
  margin: 0 auto;
  border: 1px solid #42b983;
  position: relative;
}
.h3 {
  text-align: center;
}
#mouse {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 10;
  width: 200px;
  height: 32px;
  color: #f00;
  background: #fff;
  vertical-align: baseline;
}
</style>

